<template>
  <Card :title="`每${title}的规则引擎活动`" :body-style="{ padding: '12px' }">
    <template #extra>
      <Tooltip title="查看统计信息">
        <a-button
          v-if="props.ifShow"
          :icon="h(LineChartOutlined)"
          size="small"
          class="mx-3"
          @click="goDetails"
        />
      </Tooltip>
      <Tooltip title="展开到全屏">
        <a-button :icon="h(ExpandOutlined)" size="small" @click="enter" />
      </Tooltip>
    </template>
    <div :style="styleD" ref="chartRef" class="w-full h-48"></div>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, Ref, watch, h, computed } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { echartsPublicOptions } from './echartsSetting';
  import { ExpandOutlined, LineChartOutlined } from '@ant-design/icons-vue';
  import { Card, Tooltip } from 'ant-design-vue';
  import { useGo } from '/@/hooks/web/usePage';
  import { useFullScreen } from '/@/hooks/component/useFullScreen';
  import emptyImg from '/@/assets/images/chartEmptyData.png';

  const props = defineProps({
    chartData: { type: Object, required: true },
    statsChartData: { type: Object },
    ifShow: { type: Boolean, default: true },
    dateKey: { type: String, required: true },
  });
  const go = useGo();
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
  const { enter } = useFullScreen(chartRef, resize);
  const title = ref('小时');
  const isEmpty = ref(false);
  const styleD = computed(() => {
    return isEmpty.value
      ? {
          background: `url(${emptyImg}) center center / contain no-repeat`,
        }
      : {};
  });
  watch(
    () => props.dateKey,
    (nVal) => {
      getInstance()?.showLoading();
      switch (nVal) {
        case 'day':
          title.value = '小时';
          break;
        case 'month':
          title.value = '天';
          break;
        case 'year':
          title.value = '月';
          break;
      }
    },
    {
      immediate: true,
      deep: true,
    },
  );
  watch(
    () => props.chartData,
    (nVal) => {
      if (nVal.ruleEngineExecutionCountHourly.length === 0) {
        isEmpty.value = true;
      } else {
        isEmpty.value = false;
      }
      let ruleEngineList: any[] = [];
      nVal &&
        nVal.ruleEngineExecutionCountHourly.forEach((item: object) => {
          ruleEngineList.push(Object.values(item));
        });
      let options = {
        ...echartsPublicOptions(props.dateKey),
        legend: {
          type: 'scroll',
          left: 10,
          data: ruleEngineList.length == 0 ? [] : ['规则引擎执行'],
        },
        series: [
          {
            name: '规则引擎执行',
            data: ruleEngineList,
            type: 'bar',
            stack: 'x',
            itemStyle: {
              color: '#9661BC',
            },
            barMaxWidth: 30,
          },
        ],
      };
      setOptions(options);
      getInstance()?.hideLoading();
    },
    {
      immediate: false,
    },
  );

  function goDetails() {
    go({
      name: 'apiDetail',
      params: {
        stats: JSON.stringify(props.statsChartData),
      },
    });
  }
</script>
